/*
 * 用户列表搜索
 * @Author: ljb
 * @Date: 2018-03-27 17:51:07
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-17 10:55:07
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.user-search-form {
		padding-left: 40px;
		.ivu-form-item-label {
			font-size: 16px;
		}
	}
</style>

<template>
	<Form
		ref="formInline"
		name="user_query__form"
		class="user-search-form"
		inline
		@keydown.native.enter.prevent="confirmSearch">

		<Form-item
			:label-width="60"
			:label="$t('skin_test.keyword')">
			<i-input
				v-model="formValidate.keywords"
				:placeholder="$t('skin_test.enter_keyword')"
				name="user_query__keyword"
				size="large"/>
		</Form-item>

		<Form-item
			:label-width="100"
			:label="$t('skin_test.gender')" >
			<Select
				v-model="formValidate.sex"
				:style="{width: '150px'}"
				name="user_query__gender"
				size="large"
				clearable>
				<Option
					v-for="option in options"
					:value="option.value"
					:key="option.value">{{ option.label }}</Option>
			</Select>
		</Form-item>

		<Form-item
			:label-width="120"
			:label="$t('skin_test.age_section_words')" >
			<Select
				v-model="formValidate.age_range"
				name="user_query__age_range"
				style="width: 150px"
				size="large"
				clearable>
				<Option
					v-for="option in age_options"
					:value="option.value"
					:key="option.value">{{ option.label }}</Option>
			</Select>
		</Form-item>

		<!-- <Form-item
			:label-width="80"
			:label="$t('skin_test.born_at')" >
			<DatePicker
				:placeholder="$t('skin_test.please_select_date')"
				type="daterange"
				placement="bottom-end"
				style="width: 200px"
				@on-change="changeDate"/>
		</Form-item> -->

		<Form-item>
			<Button
				type="primary"
				name="user_query__search"
				@click="confirmSearch">
				{{ $t('common.search') }}
			</Button>
		</Form-item>

		<Form-item>
			<Button
				type="primary"
				@click="confirmExcel">
				{{ $t('common.export_excel') }}
			</Button>
		</Form-item>

	</Form>
</template>
<script>

export default {

	data() {
		return {
			options: [
				{
					value: '0',
					label: this.$t('skin_test.unknown'), // 无
				},
				{
					value: '1',
					label: this.$t('skin_test.male'), // 无
				},
				{
					value: '2',
					label: this.$t('skin_test.female'), // 有
				},
			],
			age_options: [
				{
					value: '[1,14]',
					label: this.$t('skin_test.age_section_1'), // 1到14
				},
				{
					value: '[15,18]',
					label: this.$t('skin_test.age_section_2'), // 15到18
				},
				{
					value: '[19,25]',
					label: this.$t('skin_test.age_section_3'), // 19到25
				},
				{
					value: '[26,35]',
					label: this.$t('skin_test.age_section_4'), // 26到35
				},
				{
					value: '[36,45]',
					label: this.$t('skin_test.age_section_5'), // 36到45
				},
				{
					value: '[46,55]',
					label: this.$t('skin_test.age_section_6'), // 46到55
				},
				{
					value: '[56,100]',
					label: this.$t('skin_test.age_section_7'), // 56到100
				},
			],		// 年龄区间
			formValidate: {

				keywords: '', // 关键字

				sex: '',		// 性别

				age_range: '',	// 年龄区间

			}, // 搜索框的对象参数
		};
	},

	methods: {

		/**
		 * 导出excel表格
		 * @return {undefined}
		 */
		confirmExcel() {
			this.$emit('export');
		},

		// /**
		//  * 改变日期之后触发的回调
		//  * @param  {Array} date {日期区间}
		//  * @return {undefined}
		//  */
		// changeDate(date) {
		// 	this.formValidate.born_dates = date;
		// },

		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch() {
			const age_json = this.formValidate.age_range ? JSON.parse(this.formValidate.age_range) : [];

			const param = {

				keywords: this.formValidate.keywords,

				sex: this.formValidate.sex,

				age_range: age_json,

			};

			this.$emit('search', param);
		},

	},

};

</script>
